
<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-form label-width="160px" style="margin: 20px 50px 20px 0px;" size="mini">
      <el-row type="flex" class="list-items">
      <el-col :span="8">
        <el-form-item label="划款日期:">
          <el-date-picker v-model="table.query_param.settleDate" type="date" class="venus-input-middle venus-input-date"
            value-format="yyyyMMdd" placeholder="请选择日期" />
        </el-form-item>
      </el-col>

        <el-col :span="8">
          <el-form-item label="产品代码/名称:">
          <el-select
            v-model="table.query_param.prod_code"
            class="venus-input-middle"
            placeholder="--请选择--"
          >
            <el-option
              v-for="item in dict.prodCode"
              :label="item.prod_code+'-'+item.prod_name"
              :value="item.prod_code"
            />
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="venus-btn-box" style="text-align: center;">
          <el-button type="success" @click="search">查询</el-button>
          <el-button type="info" plain @click="resetForm">重置</el-button>
        </div>
      </el-row>
      </el-form>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination
        :table-data="table.query_param.tableData"
        :table-header-config="table.tableHeaderConfig"
        :operation-config="table.operationConfig"
        highlight-current-row
        :total="table.query_param.total"
        :page-size="table.query_param.limit"
        :now-page="table.query_param.nowPage"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import * as kk from '@/utils/k-utils'
  import '@/utils/directives'
  export default {
    name: 'BondInfo',
    data() {
      return {
        dict: {
          prodCode: []
        },
        table: {
          query_param: {
            limit: 5,
            total: 0,
            nowPage: 0,
            tableData: [], // 表格数据
            exeid: 'prodPublishList',
            //表单查询参数
            settleDate: '',
            prod_code: ''
          },
          tableHeaderConfig: [ // 表头配置
            { prop: 'prod_code', label: '产品代码' },
            { prop: 'prod_name', label: '产品名称' },
            { prop: 'establish_date', label: '发行成立日' },
            { prop: 'end_date', label: '到期日' }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'left',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '下载', func: this.download }
            ]
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
         kk.k_load_exeid('file', 'prodPublishListCondition').then(rep => {
           this.dict.prodCode = rep.rows
         })

          this.table.query_param.nowPage = 1
          kk.k_load_table(this, 'query_param', 'file')

        this.tableData = [{ prod_code: 'zcs1', prod_name: 'zcs9', establish_date: '2020-02-19', end_date: '2021-02-19' }]
      },
      search() { // 查询函数
      },
      resetForm(){

      },
      download(item, index) {

      },
      handleCurrentChange(val){
        this.table.query_param.nowPage = val
        kk.k_load_table(this, 'query_param', 'file')
      }
    }
  }
</script>

<style scoped>
</style>
